<!--search -->
<template>
  <div style="overflow: auto; height: 100%">
    <div
      v-infinite-scroll="load"
      infinite-scroll-immediate="true"
      infinite-scroll-disabled="disabled"
      infinite-scroll-distance="20"
    >
      <TypeShow :imgsUrl="imgsUrl" :imgsId="imgsId"></TypeShow>
    </div>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">
      <el-divider content-position="right">没有更多了</el-divider>
    </p>
  </div>
</template>

<script>
import { BASE_URL } from "../config";
import TypeShow from "../components/TypeShow.vue";
export default {
  data() {
    return {
      input: "",
      imgList: [],
      imgsUrl: [],
      imgsId: [],
      nextPage: 1,
      loading: false,
      noMore: false,
    };
  },
  components: {
    TypeShow,
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    this.input = this.$route.query.input;
    //this.getSearchData(this.input);
  },
  methods: {
    load() {
      this.loading = true;
      this.input = this.$route.query.input;
      this.getSearchData(this.input);
      setTimeout(() => {
        this.loading = false;
      }, 300);
    },
    async getSearchData(input) {
      let param = {
        keywords: input,
        pageNo: this.nextPage,
        pageSize: 30,
      };
      this.nextPage++;
      console.log("查找的内容为", input);
      let res = await this.$get("/searchCenter/search", param);
      this.imgList = res.data.images["records"];
      this.noMore = this.nextPage > res.data.images["pages"];
      console.log(this.nextPage, res.data.images["pages"]);
      for (var i = 0; i < this.imgList.length; i++) {
        this.imgsUrl.push(BASE_URL + "/" + this.imgList[i]["url"]);
        this.imgsId.push(this.imgList[i]["imageId"]);
      }
    },
  },
  watch: {
    $route(to) {
      if (to.path == "/home/search") {
        this.imgsUrl = [];
        this.imgList = [];
        this.imgsId = [];
        this.nextPage = 1;
        this.input = this.$route.query.input;
        this.getSearchData(this.input);
      }
    },
  },
};
</script>

<style lang="scss"  scoped>
</style>
